<!DOCTYPE html>
<!-- 改 16:17 -->
<html>

<head>
    <meta charset="UTF-8">
    <title>团队报名</title>

    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/font-awesome.min.css"/>
</head>

<body>
<div class="container" style="width: 700px;" id="teme">
    <div class="panel panel-default text-center">
        <div class="panel-header">
            <h3>团队报名</h3>
        </div>
        <div class="panel-body">
            <table class="table table-bordered">
                <tr>
                    <td>
                        <label>队长姓名：</label>
                    </td>
                    <td>
                        <input type="text" v-model="captionName" class="form-control"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>队长学号：</label>
                    </td>
                    <td>
                        <input type="text" v-model="captionId" class="form-control"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>成员：</label>
                    </td>
                    <td>
                        <div class="input-group">
									<span class="input-group-btn">
										<button data-toggle="modal" data-target="#addMember"
                                                class="btn btn-warning">添加</button>
									</span>
                        </div>
                        <hr/>
                        <ul class="list-unstyled">

                            <li v-for="n in member ">
                                <label>{{n}}</label>
                            </li>

                        </ul>
                        <hr/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>团队名：</label>
                    </td>
                    <td>
                        <input type="text" v-model="temeName" class="form-control"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>联系电话：</label>
                    </td>
                    <td>
                        <input type="tel" v-model="phone" class="form-control"/>
                    </td>
                </tr>
            </table>
        </div>
        <div class="panel-footer">
            <button class="btn btn-danger" @click="sub">提交</button>
        </div>
    </div>
</div>

<div class="modal" id="addMember">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4>添加成员</h4>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <tr>
                        <td><label>姓名:</label></td>
                        <td><input class="form-control " v-model="addName" type="text"/></td>
                    </tr>
                    <tr>
                        <td><label>学号:</label></td>
                        <td><input class="form-control " v-model="addId" type="text"/></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" @click="addOneMeber">确定</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript " src="../js/jquery-3.3.1.min.js "></script>
<script type="text/javascript " src="../js/bootstrap.min.js "></script>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script type="text/javascript" src="../js/cookieUtil.js"></script>
<script type="text/javascript ">

    var url1 = 'http://donting.free.idcfengye.com';

    var teme = new Vue({

        el: "#teme",
        data: {
            deId: '', //比赛id
            captionName: '',
            captionId: '',
            member: [], //添加的队员 学号+姓名
            temeName: '',
            phone: '',
        },
        methods: {
            sub: function () {
                var allmember = teme.captionId + '-' + teme.captionName + ';' + teme.member.join(';');
                axios.defaults.withCredentials = true;
                axios.get(url1 + '/apply/add', {
                    params: {
                        "member": allmember,
                        "phone": teme.phone,
                        "deId": teme.deId,
                        "temeName": teme.temeName
                    }

                }).then(function (response) {
                    var gf = response.data;
                    if (gf.code == 200) {
                        alert('报名成功');
                        window.history.back(-1);

                    } else {
                        alert("报名失败");
                    }

                }).catch(function (error) {
                    alert("连接超时！");
                })

            }

        },
        mounted() {
            this.deId = getCookie('deId');
        }


    });

    var addButt = new Vue({
        el: "#addMember",
        data: {
            addName: '',
            addId: ''
        },
        methods: {
            clneradd: function () {
                addButt.addName = '';
                addButt.addId = '';

            },
            addOneMeber: function () {
                console.log(addButt.addId + '-' + addButt.addName);
                teme.member.push(addButt.addId + '-' + addButt.addName);
                addButt.clneradd();
            }

        }
    });
</script>

</body>

</html>
